<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar :placeholder="true" @leftClick="goBack" title="我的余额"></u-navbar>
		<view class="margin-tb-lg margin-lr-sm bg-white flex align-center justify-between padding-lg radius">
			<view>
				<view class="text-sm text-gray">
					总余额
				</view>
				<view class="text-xxl text-bold margin-top-xs">
					{{balance}}元
				</view>
			</view>
			<view class="cuIcon-moneybag text-lg"></view>
		</view>
		<view class="margin-lg flex flex-direction">
			<text class="text-red text-sm">1、充值后所有门店都可使用</text>
			<text class="text-red text-sm margin-top-xs">2、大额充值可致电相应门店，将会给予您最满意的优惠</text>
		</view>
		<view class="margin-lg ">
			<view class="text-black text-lg text-bold">选择充值金额</view>
			<view class="margin-top-sm  pay-box">
				<view v-for="(item,index ) in paylist" :key="index" :class="item.change?'bg-tea':'bg-white'"
					@click="changPrice(item)" class="radius  line-tea flex flex-direction justify-start padding-sm">
					<text :class="item.change?'text-white':'text-black'"
						class="text-bold text-price">{{item.money}}</text>
					<text v-show="item.give>0 && isMember" :class="item.change?'text-white':'text-gray'"
						class="text-sm margin-top-xs">实际到账:{{item.money+item.give}}</text>
				</view>
			</view>
		</view>
		<view v-show="!isMember" @click="makeMember"
			class="margin-lg   padding-lg flex align-center justify-between radius  bg-white">
			<view class="flex align-center">
				<text class="cuIcon-vip text-tea" style="font-size: 30px;"></text>
				<text class="text-tea margin-left-xs">成为会员立享优惠</text>
			</view>
			<view>
				<text class="text-tea text-bold">去了解</text>
				<text class="cuIcon-right text-tea"></text>
			</view>
		</view>
		<view class="flex l align-start justify-center"
			style="position: fixed;width: 100%;height: 180upx;bottom: 0px;left: 0px;">
			<button class="cu-btn bg-tea lg" style="width: 80%;" @click="confirmPay">确认充值</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paylist: [],
				out_trade_no: '',
				isMember: false,
				balance: 0,
			}
		},
		created() {
			this.getPayList();
			this.checkUserIsVip();
		},
		methods: {
			//判断一下用户是否是vip
			checkUserIsVip() {
				uni.showLoading();
				uni.$u.http.post('/Customer/CheckUserIsVip').then(res => {
					// this.isMember = res.data.isMember; //是否为会员
					// this.balance = res.data.balance; //会员余额
					this.isMember= 1
					this.balance=100
				});
			},
			//成为会员
			makeMember() {
				uni.navigateTo({
					url: '/pagesA/member/introduce'
				})
			},
			changPrice(item) {
				this.paylist.forEach((x) => {
					x.change = x == item;
				})
			},
			getPayList() {
				uni.showLoading();
				uni.$u.http.post('/Customer/GetMemberPayPriceList').then(res => {
					// this.paylist = res.data;
					this.paylist = [{'change':1,'money':100}];
				});
			},
			//确认充值
			confirmPay() {
				const payModel = this.paylist.filter((x) => {
					return x.change
				})[0].id;
				uni.showLoading();
				uni.$u.http.post('/rest/wxpay/jsapi/corder', {
					id: payModel
				}).then(res => {
					//如果成功，返回当前余额
					this.turnUpWxPay(res);
				})
			},
			turnUpWxPay(res) {
				let that = this;
				this.out_trade_no = res.data.out_trade_no; //支付订单
				uni.requestPayment({
					provider: 'wxpay', //支付类型-固定值
					timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
					nonceStr: res.data.nonceStr, // 随机字符串
					package: res.data.package, // 固定值
					signType: res.data.signType, //固定值
					paySign: res.data.paySign, //签名
					success: function(res) {
						uni.showLoading({
							title: '支付结果查询中',
						})
						that.changeOrderStatusTotal = 0;
						that.timeIntervalId = setInterval(that.callBackPayResult, 3000);
					},
					fail: function(err) {
						console.log(err);
						let emsg = '支付失败';
						if (err.errMsg.indexOf('fail cancel') != -1) {
							emsg = '用户取消支付';
						}
						uni.showToast({
							icon: 'none',
							title: emsg
						})
					}
				});
			},
			//通知后端手动查询订单结果
			callBackPayResult() {
				this.changeOrderStatusTotal++;
				if (this.changeOrderStatusTotal >= 10) {
					clearInterval(this.timeIntervalId);
					uni.hideLoading();
					this.$refs.uToast.show({
						message: '查询支付结果超时！',
						type: 'error',
						position: 'top'
					});
					return;
				}
				//params.storeId
				uni.$u.http.post('/rest/wxpay/order/info', {
					out_trade_no: this.out_trade_no
				}).then(res => {
					if (res.data.orderStatus == "支付成功") {
						clearInterval(this.timeIntervalId);
						uni.hideLoading();
						this.$refs.uToast.show({
							message: '支付成功！',
							type: 'success',
							position: 'top'
						});
						this.checkUserIsVip();
						// uni.navigateTo({
						// 	url: '/pages/runindex?index=2',
						// })
						return;
					}
				})
			},
			goBack() {
				uni.navigateBack();
			}

		}
	}
</script>

<style scope>
	.pay-box {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 20rpx;
		row-gap: 20rpx;

	}
</style>
